<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../react.development.js"></script>
        <script src="../react-dom.development.js"></script>

        <script src="../babel.min.js"></script>
    </head>

    <body>
        <div id="root">
            <p>sada</p>
        </div>
    </body>

    <script type="text/babel">
        const name = "孙悟空";
        const lang = "en";
        let div;

        if (lang === "en") {
            div = <div>hello {name}</div>;
        } else if (lang === "cn") {
            div = <div>你好 {name}</div>;
        }

        const arr = ["沙和尚","孙悟空","猪八戒"]
        let arr2 = []
        arr.forEach(element => {
            arr2.push(<li>{element}</li>)
        });
        console.log(arr2);

        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(<ul>{arr2}</ul>);
    </script>
</html>
